<template>
    <div>
    <!-- 页头 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>栏目编辑</el-breadcrumb-item>
        <el-breadcrumb-item>栏目显示</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片部分 -->
    <el-card class="box-card">
        <el-row :gutter="20" class="search">
            <el-col :span="6">
                <el-input placeholder="请输入内容"  
                class="input-with-select"
                clearable
                @clear="getDataList"
                v-model="searchInfo.keyword"
                >
                   <el-button slot="append" icon="el-icon-search" @click="getTitleName"></el-button>
                </el-input>
            </el-col>
            <el-col :span="6">
            <el-button type="primary" class="addBtn" @click="addList">添加栏目</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table
            :data="DataList"
            stripe
            border
            style="width: 100%">
            <el-table-column
            type="index"
            label="#">
            </el-table-column>
            <el-table-column
            prop="title"
            label="名称">
            </el-table-column>
            <el-table-column
            prop="introduce"
            label="简介">
            </el-table-column>
            <el-table-column
            prop="creTime"
            label="创建日期"
            width="180">
            <template slot-scope="scope">
                {{scope.row.creTime | formatDate}}
            </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column label="发布" width="80">
                <template slot-scope="scope">
                    <!-- 发布按钮 -->
                    <el-switch
                    v-model="scope.row.status"
                    :active-value="1"
                    :inactive-value="0"
                    @change="isChanged($event, scope.row)"
                    active-color="#13ce66"
                    inactive-color="#909399">
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
        v-if="searchInfo.keyword.length == 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 15]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 表格数据
            DataList: [],
            total: 0,
            queryInfo: {
                // keyword: '',
                page: 1,  // 页数
                size: 5, // 条数
            },
            titleName: '', 
            searchInfo: {
                keyword: '',
                page: 1,  // 页数
                size: 10000, // 条数
            },
        }
    },
    mounted() {
        this.getDataList()
    },
    methods: {
        // 获取表格数据
        getDataList() {
            this.$http.get("/coreService/mediaDetail/getAll", {params: this.queryInfo})
            .then((res) => {
                if(res.data.status == 20000) {
                    this.DataList = res.data.data.records
                    // res.data.data.records.map((value, key) => {
                    //     value.creTime = this.$moment(value.creTime).format("YYYY-MM-DD HH:mm:ss")
                    //     // console.log(this.$moment(value.creTime).format("YYYY-MM-DD HH:mm:ss"));
                    //     console.log(value.creTime);
                    // })
                    this.total = res.data.data.total
                }else {
                    this.$message.error("获取数据失败")
                }
            })
            .catch((err) => {
                console.log(err);
            })
        },
        // 删除按钮
        async handleDelete(item) {
            const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if(confirmResult !== 'confirm'){
                this.$message.info("已取消删除")
            }else {
                console.log(confirmResult);  // 成功返回confirm  失败返回cancel
            this.$http.delete("/coreService/mediaDetail/delMedia" + "?id=" + item.id)
            .then((res) => {
                if(res.data.status == 20000) {
                    this.$message.success("删除成功")
                }else {
                    this.$message.error("删除数据失败")
                }
                // 重新更新表格数据
                this.getDataList()
            })
            .catch((err) => {
                console.log(err);
            })
            }
        },
        // 添加栏目
        addList() {
            this.$router.push('/show/add')
        },
        handleSizeChange(newSize) {
            this.queryInfo.size = newSize
            this.getDataList()
        },
        handleCurrentChange(newPage) {
            this.queryInfo.page = newPage
            this.getDataList()
        },
        // 发布状态
        isChanged(state, item) {
            console.log(state);
            this.$http.put("/coreService/mediaDetail/publishStat"+"?id="+item.id+"&judge="+state)
            .then((res) => {
                if(res.data.status == 20000) {
                    if(state) {
                        this.$message.success("栏目已发布")
                    }else {
                        this.$message.waring("栏目已取消发布")
                    }
                } 
            })
            .catch((err) => {
                console.log(err);
            })
        },
        // 编辑
        handleEdit(index, item) {
            this.$router.push({
                path: '/show/addshow',
                query: {
                    id: item.id
                }
            })
        },
        // 搜索
        getTitleName(a) {
            this.$http.get("/coreService/mediaDetail/getByKeyword", {params: this.searchInfo})
            .then((res) => {
                if(res.data.status == 20000) {
                    this.DataList = res.data.data.records
                    this.total = res.data.data.total
                }else {
                    this.$message.error("获取数据失败")
                }
            })
            .catch((err) => {
                console.log(err);
            })
        }
    }
}
</script>

<style lang="less" scoped>
.search {
    padding-bottom: 15px;
}
.el-pagination {
    margin-top: 20px;
    margin-left: -10px;
}
.el-switch {
    height: 0px;
}

</style>

<style>
.el-table .cell {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
</style>